<script setup>
import { ref } from 'vue'
import { useAppStore, useCoreStore, insStoreRefsArray } from '@/stores'
const [[appStore, refApp]] = insStoreRefsArray([useAppStore, useCoreStore])
const menu = ref()
const items = ref([
  {
    label: '登出',
    icon: 'pi pi-logout',
    command: appStore.logout
  }
])

const toggle = (event) => {
  menu.value.toggle(event)
}
</script>

<template>
  <Chip class="pl-3 pr-0 shadow-1">
    <span class="ml-2 font-medium mr-3">{{ appStore.getUser().un }}</span>
    <Avatar
      icon="pi pi-user"
      size="large"
      class="cursor-pointer"
      style="background-color: #2196f3; color: #ffffff"
      shape="circle"
      @click="toggle"
    />
  </Chip>
  <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" class="border-none" />
</template>
